<template>
  <div>
    <p>
      <a-button type="primary" @click="handleQuery()">刷新</a-button>&nbsp;
      <a-button type="primary" @click="onAdd">新增</a-button>
    </p>
    <a-table :dataSource="passengers"
             :columns="columns"
             :pagination="pagination"
             @change="handleTableChange"
             :loading="loading">
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'operation'">
        <a-space>
          <a-popconfirm
              title="删除后不可恢复，确认删除?"
              @confirm="onDelete(record)"
              ok-text="确认" cancel-text="取消">
            <a style="color: red">删除</a>
          </a-popconfirm>
          <a @click="onEdit(record)">编辑</a>
        </a-space>
      </template>
      <template v-else-if="column.dataIndex === 'type'">
        <span v-for="item in PASSENGER_TYPE_ARRAY" :key="item.key">
          <span v-if="item.key === record.type">
            {{item.value}}
          </span>
        </span>
      </template>
    </template>
    </a-table>
    <a-modal v-model:visible="visible" title="乘车人" @ok="handleOk"
             ok-text="确认" cancel-text="取消"
    >
      <a-form
          :model="passenger"
          name="basic"
          :label-col="{ span: 4 }"
          :wrapper-col="{ span: 20 }"
      >
        <a-form-item label="姓名">
          <a-input v-model:value="passenger.name" />
        </a-form-item>
        <a-form-item label="身份证">
          <a-input v-model:value="passenger.idCard" />
        </a-form-item>
        <a-form-item label="类型">
          <a-select v-model:value="passenger.type" >
            <a-select-option v-for="item in PASSENGER_TYPE_ARRAY" :key="item.key" :value="item.key">
              {{item.value}}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
import {defineComponent, reactive, ref,onMounted} from 'vue';
import axios from "axios";
import {notification} from "ant-design-vue";

export default defineComponent({
  setup() {
    const PASSENGER_TYPE_ARRAY=[{key:"1",value:"成人"},{key:"2",value:"儿童"},{key:"3",value:"学生"}]
    const visible = ref(false);
    const passengers=ref([]);
    const passenger=ref({
      id: undefined,
      memberId: undefined,
      name: undefined,
      idCard: undefined,
      type: undefined,
      createTime: undefined,
      updateTime: undefined,
    })
    //分页的三个属性名是固定的
    const pagination=ref({
      total: 0,
      current: 1,
      pageSize: 2
    })

    let loading=ref(false)

    const columns= [
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '身份证',
        dataIndex: 'idCard',
        key: 'idCard',
      },
      {
        title: '类型',
        dataIndex: 'type',
        key: 'type',
      },
      {
        title: '操作',
        dataIndex: 'operation'
      },
    ];


    const onAdd = () => {
      passenger.value={}
      visible.value = true;
    };
    const onEdit=(record)=>{
      passenger.value=window.Tool.copy(record);
      visible.value = true;
    }

    const onDelete = (record) => {
      axios.delete("/member/passenger/delete/" + record.id).then((response) => {
        const data = response.data;
        if (data.success) {
          notification.success({description: "删除成功！"});
          handleQuery({
            page: pagination.value.current,
            size: pagination.value.pageSize,
          });
        } else {
          notification.error({description: data.message});
        }
      });
    };
    const handleOk = e => {
      axios.post("/member/passenger/save", passenger.value).then((response) => {
        let data = response.data;
        if (data.success) {
          notification.success({description: "保存成功！"});
          visible.value = false;
          handleQuery({
            page: pagination.value.current,
            size: pagination.value.pageSize
          });
        } else {
          notification.error({description: data.message});
        }
      });
    };

    const handleTableChange = (page) => {
      // console.log("看看自带的分页参数都有啥：" + JSON.stringify(page));
      handleQuery({
        page: page.current,
        size: page.pageSize
      });
    };


    const handleQuery = (param) => {
      if (!param) {
        param = {
          page: 1,
          size: pagination.value.pageSize
        };
      }
      loading.value=true;
      axios.get("/member/passenger/query-list", {
        params: {
          page: param.page,
          size: param.size
        }
      }).then((response) => {
        loading.value=false
        let data = response.data;
        if (data.success) {
          passengers.value = data.content.list;
          //设置分页控件的值
          pagination.value.current=param.page;
          pagination.value.total=data.content.total
        } else {
          notification.error({description: data.message});
        }
      });
    };
    onMounted(()=>{
      handleQuery({
        page:1,
        size:pagination.value.pageSize
      })
    })

    return {
      visible,
      onAdd,
      handleOk,
      passenger,
      columns,
      passengers,
      pagination,
      handleTableChange,
      handleQuery,
      loading,
      onEdit,
      onDelete,
      PASSENGER_TYPE_ARRAY
    };
  },
});
</script>
<style scoped>

</style>